React Lazy Loading: การแบ่งโค้ดคอมโพเนนต์เพื่อเพิ่มประสิทธิภาพสูงสุด | MLOG | MLOGReact Lazy Loading: การแบ่งโค้ดคอมโพเนนต์เพื่อเพิ่มประสิทธิภาพสูงสุด
ในโลกดิจิทัลที่รวดเร็วในปัจจุบัน ประสิทธิภาพของเว็บไซต์เป็นสิ่งสำคัญอย่างยิ่ง ผู้ใช้คาดหวังการตอบสนองที่รวดเร็วทันใจ และเวลาในการโหลดที่ช้าอาจนำไปสู่ความหงุดหงิด การละทิ้งตะกร้าสินค้า และภาพลักษณ์ของแบรนด์ในเชิงลบ สำหรับแอปพลิเคชัน React การเพิ่มประสิทธิภาพเป็นสิ่งสำคัญอย่างยิ่งในการมอบประสบการณ์ผู้ใช้ที่ราบรื่นและน่าดึงดูด หนึ่งในเทคนิคที่ทรงพลังเพื่อให้บรรลุเป้าหมายนี้คือ lazy loading พร้อมกับการแบ่งโค้ดคอมโพเนนต์ (component code splitting)
Lazy Loading และ Code Splitting คืออะไร?
Lazy loading คือเทคนิคที่ทรัพยากรต่างๆ เช่น รูปภาพ สคริปต์ และคอมโพเนนต์ จะถูกโหลดเมื่อจำเป็นเท่านั้น แทนที่จะโหลดทั้งหมดพร้อมกันในระหว่างการโหลดหน้าเว็บครั้งแรก ซึ่งช่วยลดปริมาณข้อมูลที่ต้องดาวน์โหลดและประมวลผลล่วงหน้าได้อย่างมาก ส่งผลให้เวลาในการโหลดเริ่มต้นเร็วขึ้นและประสิทธิภาพที่ผู้ใช้รับรู้ได้ดีขึ้น
Code splitting คือกระบวนการแบ่งโค้ดของแอปพลิเคชันของคุณออกเป็นส่วนเล็กๆ ที่จัดการได้ง่ายขึ้น (หรือที่เรียกว่า bundles) ซึ่งช่วยให้เบราว์เซอร์สามารถดาวน์โหลดเฉพาะโค้ดที่จำเป็นสำหรับมุมมองเริ่มต้น และเลื่อนการโหลดโค้ดอื่นๆ ออกไปจนกว่าจะมีความต้องการใช้งานจริง Lazy loading ใช้ประโยชน์จาก code splitting เพื่อโหลดคอมโพเนนต์เฉพาะเมื่อกำลังจะถูกเรนเดอร์เท่านั้น
ทำไมจึงควรใช้ Lazy Loading และ Code Splitting ใน React?
นี่คือเหตุผลที่คุณควรพิจารณาการนำ lazy loading และ code splitting มาใช้ในโปรเจกต์ React ของคุณ:
- ปรับปรุงเวลาในการโหลดเริ่มต้น: ด้วยการโหลดเฉพาะคอมโพเนนต์ที่จำเป็นในตอนแรก คุณสามารถลดเวลาที่ใช้ในการทำให้หน้าเว็บสามารถโต้ตอบได้ ซึ่งเป็นประโยชน์อย่างยิ่งสำหรับผู้ใช้ที่มีการเชื่อมต่ออินเทอร์เน็ตที่ช้าหรือบนอุปกรณ์มือถือ
- ลดขนาดของ Bundle: Code splitting ช่วยลดขนาดของ JavaScript bundle เริ่มต้น ส่งผลให้ดาวน์โหลดและประมวลผลได้เร็วขึ้น
- ปรับปรุงประสบการณ์ผู้ใช้: เว็บไซต์ที่โหลดเร็วขึ้นมอบประสบการณ์ผู้ใช้ที่ราบรื่นและน่าพึงพอใจยิ่งขึ้น นำไปสู่การมีส่วนร่วมและอัตราการแปลง (conversion rates) ที่สูงขึ้น
- ประสิทธิภาพที่ดีขึ้นบนอุปกรณ์สเปกต่ำ: Lazy loading สามารถปรับปรุงประสิทธิภาพบนอุปกรณ์ที่มีกำลังการประมวลผลและหน่วยความจำจำกัดได้อย่างมาก เนื่องจากไม่ต้องโหลดและประมวลผลทั้งแอปพลิเคชันล่วงหน้า
- ประโยชน์ด้าน SEO: เครื่องมือค้นหาให้ความสำคัญกับเว็บไซต์ที่โหลดเร็วขึ้น ดังนั้นการใช้ lazy loading สามารถส่งผลดีต่ออันดับในเครื่องมือค้นหาของคุณได้
วิธีการนำ Lazy Loading ไปใช้ใน React
React มีการรองรับ lazy loading ในตัวโดยใช้คอมโพเนนต์ React.lazy และ Suspense นี่คือคำแนะนำทีละขั้นตอน:
1. การใช้ React.lazy()
React.lazy() ช่วยให้คุณสามารถ import คอมโพเนนต์แบบไดนามิกได้ ซึ่งเป็นการแบ่งโค้ดของคุณออกเป็นส่วนๆ อย่างมีประสิทธิภาพ โดยจะรับฟังก์ชันที่เรียกใช้ import() ซึ่งจะคืนค่า Promise ที่ resolve เป็นคอมโพเนนต์นั้นๆ
const MyComponent = React.lazy(() => import('./MyComponent'));
ในตัวอย่างนี้ MyComponent จะถูกโหลดเมื่อกำลังจะถูกเรนเดอร์เท่านั้น
2. การห่อหุ้มด้วย <Suspense>
เนื่องจาก React.lazy() ใช้การ import แบบไดนามิกซึ่งเป็นแบบอะซิงโครนัส คุณจึงต้องห่อหุ้มคอมโพเนนต์ที่โหลดแบบ lazy ด้วยคอมโพเนนต์ <Suspense> คอมโพเนนต์ <Suspense> ช่วยให้คุณสามารถแสดง UI สำรอง (เช่น ไอคอนหมุนสำหรับโหลด) ในขณะที่คอมโพเนนต์กำลังถูกโหลด
import React, { Suspense } from 'react';
function MyPage() {
return (
Loading...
ในตัวอย่างนี้ ข้อความ Loading... จะปรากฏขึ้นในขณะที่ MyComponent กำลังถูกโหลด เมื่อโหลดคอมโพเนนต์เสร็จแล้ว มันจะมาแทนที่ UI สำรอง
3. ตัวอย่างการใช้งานจริง: การทำ Lazy Loading แกลเลอรีรูปภาพขนาดใหญ่
ลองพิจารณาสถานการณ์ที่คุณมีแกลเลอรีรูปภาพขนาดใหญ่ การโหลดรูปภาพทั้งหมดในครั้งเดียวอาจส่งผลกระทบอย่างมากต่อประสิทธิภาพ นี่คือวิธีที่คุณสามารถทำ lazy load ให้กับรูปภาพโดยใช้ React.lazy() และ <Suspense>:
import React, { Suspense } from 'react';
const LazyImage = React.lazy(() => import('./Image'));
function ImageGallery() {
const images = [
{ id: 1, src: 'image1.jpg', alt: 'Image 1' },
{ id: 2, src: 'image2.jpg', alt: 'Image 2' },
{ id: 3, src: 'image3.jpg', alt: 'Image 3' },
// ... รูปภาพเพิ่มเติม
];
return (
{images.map(image => (
Loading image...
}>
))}
และคอมโพเนนต์ Image.js:
import React from 'react';
const Image = ({ src, alt }) => {
return 
;
};
export default Image;
ในตัวอย่างนี้ รูปภาพแต่ละรูปจะถูกห่อด้วยคอมโพเนนต์ <Suspense> ดังนั้นข้อความแสดงการโหลดจะปรากฏขึ้นสำหรับแต่ละภาพในขณะที่กำลังโหลด ซึ่งจะช่วยป้องกันไม่ให้ทั้งหน้าเว็บถูกบล็อกในขณะที่กำลังดาวน์โหลดรูปภาพ
เทคนิคขั้นสูงและข้อควรพิจารณา
1. Error Boundaries
เมื่อใช้ lazy loading สิ่งสำคัญคือต้องจัดการกับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างกระบวนการโหลด สามารถใช้ Error boundaries เพื่อดักจับข้อผิดพลาดเหล่านี้และแสดง UI สำรองได้ คุณสามารถสร้างคอมโพเนนต์ error boundary ได้ดังนี้:
import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// อัปเดต state เพื่อให้การเรนเดอร์ครั้งถัดไปแสดง UI สำรอง
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// คุณยังสามารถบันทึกข้อผิดพลาดไปยังบริการรายงานข้อผิดพลาดได้
console.error(error, errorInfo);
}
render() {
if (this.state.hasError) {
// คุณสามารถเรนเดอร์ UI สำรองที่คุณกำหนดเองได้
return Something went wrong.
;
}
return this.props.children;
}
}
export default ErrorBoundary;
จากนั้นห่อหุ้มคอมโพเนนต์ <Suspense> ด้วย <ErrorBoundary>:
Loading...}>
หากเกิดข้อผิดพลาดขณะโหลด MyComponent, <ErrorBoundary> จะดักจับและแสดง UI สำรอง
2. Server-Side Rendering (SSR) และ Lazy Loading
Lazy loading ยังสามารถใช้ร่วมกับ Server-Side Rendering (SSR) เพื่อปรับปรุงเวลาในการโหลดเริ่มต้นของแอปพลิเคชันของคุณได้ อย่างไรก็ตาม มันต้องการการกำหนดค่าเพิ่มเติมบางอย่าง คุณจะต้องแน่ใจว่าเซิร์ฟเวอร์สามารถจัดการกับการ import แบบไดนามิกได้อย่างถูกต้อง และคอมโพเนนต์ที่โหลดแบบ lazy ได้รับการ hydrate อย่างเหมาะสมบนฝั่งไคลเอ็นต์
เครื่องมืออย่าง Next.js และ Gatsby.js มีการรองรับ lazy loading และ code splitting ในสภาพแวดล้อม SSR ในตัว ทำให้กระบวนการง่ายขึ้นมาก
3. การโหลดคอมโพเนนต์แบบ Lazy-Loaded ล่วงหน้า
ในบางกรณี คุณอาจต้องการโหลดคอมโพเนนต์แบบ lazy-loaded ล่วงหน้าก่อนที่จะมีความจำเป็นต้องใช้งานจริง ซึ่งอาจมีประโยชน์สำหรับคอมโพเนนต์ที่มีแนวโน้มว่าจะถูกเรนเดอร์ในไม่ช้า เช่น คอมโพเนนต์ที่อยู่ด้านล่างของหน้าจอแต่มีแนวโน้มที่จะถูกเลื่อนเข้ามาในมุมมอง คุณสามารถโหลดคอมโพเนนต์ล่วงหน้าได้โดยการเรียกใช้ฟังก์ชัน import() ด้วยตนเอง:
import('./MyComponent'); // โหลด MyComponent ล่วงหน้า
ซึ่งจะเริ่มโหลดคอมโพเนนต์ในเบื้องหลัง เพื่อให้พร้อมใช้งานเร็วขึ้นเมื่อมีการเรนเดอร์จริง
4. การ Import แบบไดนามิกด้วย Webpack Magic Comments
"Magic comments" ของ Webpack เป็นวิธีที่ช่วยให้คุณสามารถกำหนดชื่อของ code chunks ที่สร้างขึ้นได้เอง ซึ่งมีประโยชน์สำหรับการดีบักและวิเคราะห์โครงสร้าง bundle ของแอปพลิเคชันของคุณ ตัวอย่างเช่น:
const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));
ซึ่งจะสร้าง code chunk ที่ชื่อว่า "my-component.js" (หรือชื่อที่คล้ายกัน) แทนที่จะเป็นชื่อทั่วไป
5. การหลีกเลี่ยงข้อผิดพลาดที่พบบ่อย
- การแบ่งย่อยเกินไป (Over-splitting): การแบ่งโค้ดของคุณออกเป็นส่วนเล็กๆ มากเกินไปอาจทำให้ประสิทธิภาพลดลงได้ เนื่องจากค่าใช้จ่ายในการส่งคำขอเครือข่ายหลายครั้ง พยายามหาสมดุลที่เหมาะสมกับแอปพลิเคชันของคุณ
- การวางตำแหน่ง Suspense ที่ไม่ถูกต้อง: ตรวจสอบให้แน่ใจว่า
<Suspense> ของคุณถูกวางไว้อย่างเหมาะสมเพื่อมอบประสบการณ์ที่ดีแก่ผู้ใช้ หลีกเลี่ยงการห่อหุ้มทั้งหน้าเว็บด้วย <Suspense> หากเป็นไปได้
- ลืมใช้ Error Boundaries: ใช้ error boundaries เสมอเพื่อจัดการกับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างการทำ lazy loading
ตัวอย่างและการใช้งานในโลกแห่งความเป็นจริง
Lazy loading สามารถนำไปประยุกต์ใช้กับสถานการณ์ที่หลากหลายเพื่อปรับปรุงประสิทธิภาพของแอปพลิเคชัน React นี่คือตัวอย่างบางส่วน:
- เว็บไซต์อีคอมเมิร์ซ: การทำ lazy loading รูปภาพสินค้า วิดีโอ และคำอธิบายสินค้ารายละเอียด สามารถปรับปรุงเวลาในการโหลดเริ่มต้นของหน้าสินค้าได้อย่างมาก
- บล็อกและเว็บไซต์ข่าว: การทำ lazy loading รูปภาพ วิดีโอที่ฝังไว้ และส่วนความคิดเห็น สามารถเพิ่มประสบการณ์การอ่านและลดอัตราการตีกลับ (bounce rates) ได้
- แดชบอร์ดและแผงควบคุมสำหรับผู้ดูแลระบบ: การทำ lazy loading แผนภูมิ กราฟ และตารางข้อมูลที่ซับซ้อน สามารถปรับปรุงการตอบสนองของแดชบอร์ดและแผงควบคุมได้
- Single-Page Applications (SPAs): การทำ lazy loading เส้นทาง (routes) และคอมโพเนนต์ สามารถลดเวลาในการโหลดเริ่มต้นของ SPAs และปรับปรุงประสบการณ์ผู้ใช้โดยรวมได้
- แอปพลิเคชันสำหรับนานาชาติ (Internationalized Applications): การโหลดทรัพยากรเฉพาะภาษา (ข้อความ รูปภาพ ฯลฯ) เมื่อจำเป็นสำหรับภาษาของผู้ใช้เท่านั้น ตัวอย่างเช่น การโหลดคำแปลภาษาเยอรมันสำหรับผู้ใช้ในเยอรมนี และคำแปลภาษาสเปนสำหรับผู้ใช้ในสเปน
ตัวอย่าง: เว็บไซต์อีคอมเมิร์ซระดับนานาชาติ
ลองนึกภาพเว็บไซต์อีคอมเมิร์ซที่ขายสินค้าทั่วโลก ประเทศต่างๆ อาจมีสกุลเงิน ภาษา และแคตตาล็อกสินค้าที่แตกต่างกัน แทนที่จะโหลดข้อมูลทั้งหมดสำหรับทุกประเทศล่วงหน้า คุณสามารถใช้ lazy loading เพื่อโหลดข้อมูลเฉพาะสำหรับตำแหน่งที่ตั้งของผู้ใช้เมื่อพวกเขาเข้าชมไซต์เท่านั้น
const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))
function ECommerceSite() {
const userCountry = getUserCountry(); // ฟังก์ชันสำหรับระบุประเทศของผู้ใช้
return (
Loading content for your region...}>
);
}
สรุป
Lazy loading และ component code splitting เป็นเทคนิคที่มีประสิทธิภาพสำหรับการเพิ่มประสิทธิภาพของแอปพลิเคชัน React ด้วยการโหลดคอมโพเนนต์เมื่อจำเป็นเท่านั้น คุณสามารถลดเวลาในการโหลดเริ่มต้น ปรับปรุงประสบการณ์ผู้ใช้ และเสริมสร้าง SEO ของคุณได้อย่างมาก คอมโพเนนต์ React.lazy() และ <Suspense> ที่มาพร้อมกับ React ทำให้การนำ lazy loading ไปใช้ในโปรเจกต์ของคุณเป็นเรื่องง่าย โอบรับเทคนิคเหล่านี้เพื่อสร้างเว็บแอปพลิเคชันที่เร็วขึ้น ตอบสนองได้ดีขึ้น และน่าดึงดูดยิ่งขึ้นสำหรับผู้ชมทั่วโลก
จำไว้เสมอว่าต้องคำนึงถึงประสบการณ์ของผู้ใช้เมื่อใช้ lazy loading จัดเตรียม UI สำรองที่ให้ข้อมูล จัดการข้อผิดพลาดที่อาจเกิดขึ้นอย่างเหมาะสม และวิเคราะห์ประสิทธิภาพของแอปพลิเคชันของคุณอย่างรอบคอบเพื่อให้แน่ใจว่าคุณบรรลุผลลัพธ์ที่ต้องการ อย่ากลัวที่จะทดลองกับแนวทางต่างๆ และค้นหาโซลูชันที่ดีที่สุดสำหรับความต้องการเฉพาะของคุณ